<template>
  <view class="browse-history-layout">
    <!-- 按日期分组展示商品 -->
    <view v-for="(group, date) in groupedGoodsList" :key="date" class="date-group">
      <view class="date-header">{{ formatDate(date) }}</view>
      <view class="goods-list">
        <GoodsCard
          v-for="goodsItem in group"
          :key="goodsItem.id"
          :goods-item="goodsItem"
          @click="goToGoodsDetail(goodsItem)"
        />
      </view>
    </view>

    <!-- 无浏览记录提示 -->
    <view v-if="Object.keys(groupedGoodsList).length === 0" class="empty-tip">
      <van-empty image="search" description="暂无浏览记录" />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import GoodsCard from '@/components/GoodsCard.vue'

// 商品列表
const goodsList = ref([
  {
    id: '1',
    category: '推荐',
    categoryId: 1,
    name: 'Apple iPhone 14 Pro Max 正品国行苹果手机，一年质保，只换不修。质量杠杠滴',
    price: 9999.99,
    originalPrice: 10999.99,
    sales: 23453,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Apple官方旗舰店',
    browseDate: '2023-10-01'
  },
  {
    id: '2',
    category: '推荐',
    categoryId: 1,
    name: 'Apple iPhone 15 Pro Max',
    price: 9999.99,
    originalPrice: 10999.99,
    sales: 5748,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Apple官方旗舰店',
    browseDate: '2023-10-01'
  },
  {
    id: '3',
    category: '推荐',
    categoryId: 1,
    name: 'Samsung Galaxy S23 Ultra',
    price: 8999.99,
    originalPrice: 9999.99,
    sales: 3456,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Samsung官方旗舰店',
    browseDate: '2023-09-30'
  }
])

// 按日期分组的商品列表
const groupedGoodsList = computed(() => {
  return goodsList.value.reduce((acc, goodsItem) => {
    const date = goodsItem.browseDate
    if (!acc[date]) {
      acc[date] = []
    }
    acc[date].push(goodsItem)
    return acc
  }, {})
})

// 格式化日期
const formatDate = (date) => {
  const [year, month, day] = date.split('-')
  return `${month}月${day}日`
}

// 跳转到商品详情页
const goToGoodsDetail = (goodsItem) => {
  uni.navigateTo({
    url: `/pages/goodsDetail/GoodsDetail?id=${goodsItem.id}`
  })
}
</script>

<style scoped lang="scss">
.browse-history-layout {
  min-height: 100vh;
  background-color: #f7f8fa;

  .date-group {

    .date-header {
      font-size: 28rpx;
      color: #666;
      padding: 20rpx;
      background-color: #f8f8f8;
      border-radius: 10rpx;
    }

    .goods-list {
      padding: 20rpx;

      .goods-card {
        border-radius: 15rpx; // 添加圆角
        overflow: hidden;
        &:not(:last-child) {
          margin-bottom: 20rpx;
        }

        .goods-image {
          width: 100%;
          height: 0;
          padding-bottom: 100%; // 确保图片为正方形
          background-size: cover;
          background-position: center;
        }

        .goods-info {
          padding: 20rpx;

          .browse-date {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }

  .empty-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
}
</style>